<script setup lang="ts">
import type { FormItemTool } from '../../../types/index.ts'

type IProps = {
  item: FormItemTool<'inputNumber'>
  allDisabled: boolean
  isEditByRow: boolean
}
const props = withDefaults(defineProps<IProps>(), {
  isEditByRow: true,
})
const { item, allDisabled } = toRefs(props)
const emits = defineEmits(['keyUpEnter'])
const value = defineModel<any>('value')
const keyUpEnter = ($event: any, item: any) => {
  emits('keyUpEnter', $event, item)
}
const elRef = useTemplateRef('elRef')
const getRef = () => {
  return elRef.value
}
defineExpose({
  getRef,
})
</script>
<template>
  <span class="w-full">
    <el-input-number
      v-if="isEditByRow"
      ref="elRef"
      clearable
      :disabled="allDisabled"
      v-model="value"
      controls-position="right"
      style="width: 100%;"
      @keyup.enter="keyUpEnter($event, item)"
      v-bind="item.config"
      v-on="item.eventFunction || {}"
    >
      <template v-for="slotName in item.slotNames" #[slotName]="slotData">
        <slot :name="slotName" :slotData="slotData"> </slot>
      </template>
    </el-input-number>
    <span v-else> {{ value }} </span>
  </span>
</template>

<style scoped lang="scss"></style>
